<template>
  <div>
    <el-dialog title="" v-model="viewEchart" width="100%" top="0vh" :close-on-click-modal="false" @close="handleclose">
      <div class="dialog_box" :style="{ height: chartHeight + 'px' }">
        <div ref="sourceEchart" class="Today_recharge_situation"
          style="width: 100%; min-height: 400px; max-height: 1080px"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/api";
import axios from "axios";
import * as echarts from "echarts";
var powerC;
let token = localStorage.getItem("token");
let objparams = {
  id: null,
};
var powerCoption = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [
    {
      type: 'tree',
      data: [],
      top: '1%',
      left: '7%',
      bottom: '1%',
      right: '20%',
      symbolSize: 15,
      symbol: "circle",
      itemStyle: {
        // 节点圆圈的全局样式
        normal: {
          color: "#4992ff",
          borderColor: "#fff",
          borderWidth: 2,

        },
      },
      label: {
        position: 'left',
        verticalAlign: 'middle',
        align: 'right',
        color: "#2c8ede",//#2c8ede
        fontWeight: "normal",
        fontSize: 15,
      },
      lineStyle: {
        opacity: 0.9,
        width: 2,
        color: "rgb(20, 187, 76)",
        fontWeight: "normal",
      },
      leaves: {
        label: {
          position: 'right',
          verticalAlign: 'middle',
          align: 'left'
        }
      },
      emphasis: {
        focus: 'descendant'
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    }
  ]
};
export default {
  name: "basetable",
  components: {},
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    const viewEchart = ref(context.attrs.viewEchart);
    const dataList = ref(context.attrs.dataList);
    const sourceEchart = ref(null);
    const chartHeight = ref(500);
    onMounted(() => {
      setTimeout(function () {
        powerC = echarts.init(sourceEchart.value);
        console.log(dataList.value);
        powerCoption.series[0].data = [dataList.value];
        powerC.setOption(powerCoption);
        const eleArr2 = Array.from(new Set(powerC._chartsViews[0]._data._graphicEls))
        const itemHeight2 = 30;
        const currentHeight2 = itemHeight2 * (eleArr2.length - 1) || itemHeight2;
        // console.log(eleArr);
        // console.log(currentHeight)
        const newHeight2 = Math.max(currentHeight2, itemHeight2);
        // console.log(currentHeight)
        chartHeight.value = newHeight2;
        powerC.resize({
          height: newHeight2
        })
        window.addEventListener("resize", function () {
          powerC.resize();
        });
        powerC.on("click", function () {
          const eleArr = Array.from(new Set(powerC._chartsViews[0]._data._graphicEls))
          const itemHeight = 30;
          const currentHeight = itemHeight * (eleArr.length - 1) || itemHeight;
          // console.log(eleArr);
          // console.log(currentHeight)
          const newHeight = Math.max(currentHeight, itemHeight);
          // console.log(currentHeight)
          chartHeight.value = newHeight;
          powerC.resize({
            height: newHeight
          })
        });
      }, 500);
    });
    const handleclose = () => {
      viewEchart.value = false;
      context.emit("handleclose", viewEchart.value);
    };
    return { viewEchart, chartHeight, sourceEchart, handleclose };
  },
};
</script>

<style lang="less" scoped>
&:deep(.el-dialog__body) {
  padding: 0;
}

&:deep(.el-dialog) {
  background: rgba(5, 5, 5, 0.253);
}

&:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
}

.iframe {
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.tabclass {
  margin: 10px 20px;
}

.tabclass span {
  font-size: 14px;
  margin-right: 20px;
  color: rgb(102, 102, 102);
}

.dialog_box {
  width: 100%;
  overflow: auto;
  min-height: 400px;
  min-height: 800px;
  display: flex;
  justify-content: center;
}
</style>
